<template>
    <h2>显示列表</h2>
    房型名称<input type="text" v-model="Room_TypeName">
    房型大小面积<input type="number" v-model="Room_TypeMianJi">
    <input type="button" value="查询" @click="LoData">
    <table border="1">
        <thead>
        <tr>
            <td>房型编号</td>
            <td>房型名称</td>
            <td>预览图</td>
            <td>房型大小面积</td>
            <td>可住人数</td>
            <td>门市价</td>
            <td>房型介绍</td>
            <td>操作列</td>
        </tr>
    </thead>
    <tbody>
        <tr v-for="item in info">
            <td>{{item.Room_TypeId}}</td>
            <td>{{item.Room_TypeName}}</td>
            <td><img style="width: 60px;height: 60px;" :src="item.Room_TypeImg"></td>
            <td>{{item.Room_TypeMianJi}}</td>
            <td>{{item.Room_TypeNum}}</td>
            <td>{{item.Room_TypePrice}}</td>
            <td>{{item.Room_TypeInfo}}</td>
            <td>操作列</td>
        </tr>
    </tbody>
    </table>
    当前共{{ pageInfo.totalcount }}条,当前页共{{pageInfo.pageSize  }}条，
    当前共{{  pageInfo.pageIndex}}/{{ pageInfo.pagecount }}页
    <span>
        <a style="margin-right: 20px;"  @click="pageChange('F')">首页</a>
        <a style="margin-right: 20px;"  @click="pageChange('U')">上一页</a>
        <a style="margin-right: 20px;"  @click="pageChange('N')">下一页</a>
        <a style="margin-right: 20px;"  @click="pageChange('E')">尾页</a>
    </span>
</template>
<script setup lang="ts">
import axios from 'axios';
import { onMounted,ref } from 'vue';

onMounted(()=>{
    LoData();
})


const info=ref([{
    Room_TypeId:0,
    Room_TypeName:"",
    Room_TypeImg:"",
    Room_TypeMianJi:"",
    Room_TypePrice:"",
    Room_TypeNum:"",
    Room_TypeInfo:""
}])

const pageInfo=ref({
    pageIndex:1,
    pageSize:2,
    pagecount:0,
    totalcount:0

})

const Room_TypeName=ref("");

const Room_TypeMianJi=ref("")



const LoData=()=>{
    axios.get('https://localhost:7023/api/RoomType/ShowRoomType',
    {
        params:{
            RoomTypeName:Room_TypeName.value,
            Room_TypeMianJi:Room_TypeMianJi.value,
            pageIndex:pageInfo.value.pageIndex,
            pageSize:pageInfo.value.pageSize
        }
    }

    )
    .then(res=>{
        console.log(res.data)
        pageInfo.value.pagecount=res.data.PageCount
        pageInfo.value.totalcount=res.data.Data_Info
    })
}





//分页
const pageChange=(choose:string)=>{

    switch(choose){
        case 'F':
            pageInfo.value.pageIndex=1;
            break;
            case 'U':
            pageInfo.value.pageIndex=pageInfo.value.pageIndex-1;
            break;
            case 'N':
            pageInfo.value.pageIndex=pageInfo.value.pageIndex+1;
            break;
            case 'E':
            pageInfo.value.pageIndex=pageInfo.value.pagecount;
            break;
    }
    LoData();


}



</script>